<!DOCTYPE html>
<html>
<head>
	<title>{{longName}}</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
{% if 'embedded' not in preferences or preferences['embedded'] == false -%}
	<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.4.2/base-min.css&pure/0.4.2/buttons-min.css&pure/0.4.2/forms-min.css&pure/0.4.2/grids-min.css">
{% endif %}
	<style type="text/css" media="screen">
{% if 'embedded' in preferences and preferences['embedded'] == true -%}
{% include "resources/css/pure/0.4.2/base-min.css" %}
{% include "resources/css/pure/0.4.2/buttons-min.css" %}
{% include "resources/css/pure/0.4.2/forms-min.css" %}
{% include "resources/css/pure/0.4.2/grid-custom-min.css" %}
{% macro pa_css() %}{% include "resources/css/pebble-autoconfig.css" %}{% endmacro %}
{{ pa_css()|minify_css }}
{% else -%}
{% include "resources/css/pebble-autoconfig.css" %}
{%- endif %}
	</style>
</head>
<body>
	<div class="wrapper">
		<header>
			<h1>{{longName}}</h1>
		</header>
		<article>
			{% if 'description' in preferences -%}
			<div id="description">{{ preferences['description'] }}</div>
			{%- endif %}
			<form class="pure-form pure-form-stacked">
				<fieldset>
					{%- if 'items' in preferences %}
					{%- for item in preferences['items']: %}
					<div class="pure-control-group">
						<h4>{{ item['title'] }}</h4>
						<div class="description">{{ item['description']}}</div>
						{%- if item['type'] == 'enum' %}
						<select id="{{ item['name'] }}" class="pure-input-1" name="{{ item['name'] }}">
							{%- for key, choice in item['choices'].iteritems() %}
							<option value="{{loop.index0 }}">{{ choice }}</option>
							{%- endfor %}
						</select>
						<script type="text/javascript">
						document.querySelector("#{{ item['name'] }}").value = {{item['default']}};
						</script>
						{%- elif item['type'] == 'integer' %}
						<div class="pure-g">
							<div class="pure-u-1-4">
								<div class="l-box">
									<input id="{{ item['name'] }}" class="pure-input-1" type="number" name="{{ item['name'] }}" min="{{item['min']}}" max="{{item['max']}}" value="{{item['default']}}" required>
								</div>
							</div>
							<div class="pure-u-3-4">
								<div class="l-box">
									<input class="pure-input-1" type="range" min="{{item['min']}}" max="{{item['max']}}" data-exclude>
								</div>
							</div>
						</div>
						{%- elif item['type'] == 'boolean' %}
						<label for="{{ item['name'] }}-off" class="pure-radio">
							<input id="{{ item['name'] }}-off" type="radio" name="{{ item['name'] }}" value="0" data-exclude checked>
							{{ item['off-text'] }}
						</label>
						<label for="{{ item['name'] }}" class="pure-radio">
							<input id="{{ item['name'] }}" type="radio" name="{{ item['name'] }}" value="1">
							{{ item['on-text'] }}
						</label>
						<script type="text/javascript">
						document.querySelector("#{{ item['name'] }}").checked = {{item['default']|lower}};
						</script>
						{%- elif item['type'] == 'string' %}
						<input id="{{ item['name'] }}" class="pure-input-1" type="text" name="{{ item['name'] }}" value="{{ item['default'] }}" maxlength="{{ item['max-length'] }}" 
						{%- if item['pattern'] %} pattern="{{ item['pattern'] }}" required>
						{%- else %}>
						{%- endif %}
						{%- endif %}
					</div>
					{%- endfor %}
					{%- endif %}
				</fieldset>
				<div class="buttons">
					<button id="save" class="pure-button pure-button-primary" type="submit">Save</button>
					<button id="cancel" class="pure-button" type="reset">Cancel</button>
				</div>
				<div class="clear"></div>
			</form>
			<div id="log"></div>
			<div class="push"></div>
		</article>
	</div>
	<footer class="l-box is-center">
		Powered by Pebble Autoconfig
	</footer>
	<script type="text/javascript">
{% if 'embedded' in preferences and preferences['embedded'] == true %}
{% macro pa_val() %}{% include "resources/js/validation.js" %}{% endmacro %}
{{ pa_val()|minify_js }}
{% macro pa_pc() %}{% include "resources/js/pconfig.js.jinja" %}{% endmacro %}
{{ pa_pc()|minify_js }}
{% macro pa_js() %}{% include "resources/js/pebble-autoconfig.js.jinja" %}{% endmacro %}
{{ pa_js()|minify_js }}
{% else -%}
{% include "resources/js/validation.js" %}
{% include "resources/js/pconfig.js.jinja" %}
{% include "resources/js/pebble-autoconfig.js.jinja" %}
{%- endif %}
	</script>
</body>
</html>